<script setup lang="ts">
import PageLayout from '@/components/PageLayout.vue';
import HeaderText from '@/components/HeaderText.vue';
import FlexCard from '@/components/FlexCard.vue';
import LRMenu from '@/components/LRMenu.vue';
import SwitchDark from '@/components/SwitchDark.vue';
import { computed } from 'vue';
import { encodeProgram } from '@/utils/instructions';
import { useLocalStorage } from '@vueuse/core';
import { ElInput, ElRow, ElCol } from 'element-plus';
const program = useLocalStorage('instruction-encoder-program', '');
const result = computed(() => {
  try {
    return encodeProgram(program.value);
  } catch (error) {
    return error instanceof Error ? error.message : 'Unknown error';
  }
});
</script>

<template>
  <PageLayout>
    <template #header>
      <LRMenu>
        <HeaderText>Instruction Decoder</HeaderText>
        <template #end>
          <SwitchDark></SwitchDark>
        </template>
      </LRMenu>
    </template>
    <FlexCard>
      <ElRow :style="{ padding: '40px', fontFamily: 'Consolas' }">
        <ElCol :span="12">
          <ElInput :type="'textarea'" v-model="program" autosize> </ElInput>
        </ElCol>
        <ElCol :span="12">
          <ElInput :type="'textarea'" v-model="result" autosize readonly> </ElInput>
        </ElCol>
      </ElRow>
    </FlexCard>
  </PageLayout>
</template>
